<template>
	<div class="attribute-container">
		<div class="head">
			<div>
				<svg aria-hidden="true" class="svg-icon arrow" @click="handleExpand">
					<use v-if="!isExpand" href="#icon-right_arrow_normal"></use>
					<use v-else href="#icon-below_arrow_normal"></use> 
				</svg>
				<span>指令</span>
			</div>
			<div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
				
				<el-tooltip
				        class="box-item"
				        effect="dark"
				        content="同步当前对象指令至同组件对象上"
				      >
					<el-icon class="custom-icon" @click="handleSynchronizeCommandsForTheSameComponent"><Refresh /></el-icon>
				</el-tooltip>
				
				<el-tooltip
				        class="box-item"
				        effect="dark"
				        content="新增指令"
				      >
					<el-icon class="custom-icon" @click="editActorActionDialogRef.openDialog({actorId:actorId},'add')"><Plus /></el-icon>
				</el-tooltip>
			</div>
		</div>
 		<div class="body" v-if="isExpand" style="margin:5px;max-height:250px;">
			<el-scrollbar max-height="250px">
				<div class="action-row" v-for=" action in tableData">
					<div v-if="action.children && action.children.length>0" class="row-group">
						<div class="head" @click="handleExpandActionGroup(action)">
							<div>
								<svg aria-hidden="true" class="svg-icon arrow" style="width: 14px;height: 14px;">
									<use v-if="currntExpand==action.id" href="#icon-below_arrow_normal"></use> 
									<use v-else href="#icon-right_arrow_normal"></use> 
								</svg>
								<span>{{action.group}}</span>
							</div>
						</div>
						<div class="body" style="padding: 0 16px;" v-if="currntExpand==action.id">
							<div  v-for="child in action.children" class="row-content">
								<div class="ellipsis">
									<span>{{child.name}}</span>
								</div>
								<div class="right">
									
									<el-tooltip
											class="box-item"
											effect="dark"
											content="执行"
										>
										<el-icon @click.stop="handleExecuteAction(child)" :loading="loading"><Pointer /></el-icon>
									</el-tooltip>
									
									<el-tooltip
											class="box-item"
											effect="dark"
											content="编辑"
										>
										<el-icon  @click.stop="editActorActionDialogRef.openDialog(child,'edit')" :loading="loading"><Edit /></el-icon>
									</el-tooltip>
									
									<el-tooltip
											class="box-item"
											effect="dark"
											content="逻辑"
										>
										<el-icon  @click.stop="designActorActionDialogRef.openDialog(child)" :loading="loading"><Operation/></el-icon>
									</el-tooltip>
									
									<el-tooltip
											class="box-item"
											effect="dark"
											content="删除"
										>
										<el-icon  @click.stop="handleDeleteActorAction(child)" :loading="loading"><Delete /></el-icon>
									</el-tooltip>
								</div>
							</div>
						</div>
					</div>
					<div v-else class="row-content">
						<div class="ellipsis">
							<span>{{action.name}}</span>
						</div>
						<div class="right">
							<el-tooltip
									class="box-item"
									effect="dark"
									content="执行"
								>
								<el-icon @click.stop="handleExecuteAction(action)" :loading="loading"><Pointer /></el-icon>
							</el-tooltip>
							
							<el-tooltip
									class="box-item"
									effect="dark"
									content="编辑"
								>
								<el-icon  @click.stop="editActorActionDialogRef.openDialog(action,'edit')" :loading="loading"><Edit /></el-icon>
							</el-tooltip>
							
							<el-tooltip
									class="box-item"
									effect="dark"
									content="逻辑"
								>
								<el-icon  @click.stop="designActorActionDialogRef.openDialog(action)" :loading="loading"><Operation/></el-icon>
							</el-tooltip>
							
							<el-tooltip
									class="box-item"
									effect="dark"
									content="删除"
								>
								<el-icon  @click.stop="handleDeleteActorAction(action)" :loading="loading"><Delete /></el-icon>
							</el-tooltip>
						</div>
					</div>
				</div>
			</el-scrollbar>
		</div>	 
		<EditActorActionDialog  ref="editActorActionDialogRef" @closeDialog="closeDialog"></EditActorActionDialog>
		<DesignActorActionDialog  ref="designActorActionDialogRef" @closeDialog="closeDialog"></DesignActorActionDialog>
	</div>
</template>

<script lang="ts" setup>
	import {
	  Edit,Delete,Pointer,Operation,Plus,Refresh
	} from '@element-plus/icons-vue'
	import {
	  getActorActions,deleteActorAction,executeActorAction,synchronizeCommandsForTheSameComponent
	} from "@/api/wdp/actor";
	import EditActorActionDialog from "@/components/Actor/components/EditActorActionDialog.vue";
	import DesignActorActionDialog from "@/components/Actor/components/DesignActorActionDialog.vue";
	
	const editActorActionDialogRef=ref();
	const designActorActionDialogRef=ref();
	const isExpand=ref(false);
	const currntExpand=ref<string>("");
	
	const props = defineProps({
		baseUrl: {
			type: String,
			default: () => ''
		},
		actorId: {
			type: String,
			default: () => ''
		},
		state: {
			type: String,
			default: () => ''
		},
		product: {
			type: String,
			default: () => ''
		}
	})
	
	const keywords = ref('');
	const isClose=ref(false);
	const loading=ref<boolean>(false);
	let tableData=ref<any[]>([])
	const baseUrl = ref<string>('');
	const actorId = ref<string>('');
	
	const handleExpand=()=>{
		isExpand.value=!isExpand.value
		load();
	}
	
	const handleExpandActionGroup=(row:any)=>{
		if(currntExpand.value==row.id){
			currntExpand.value="";
		}else{
			currntExpand.value=row.id
		}
	}
	
	const load=()=>{
		if(isExpand.value==false){
			return;
		}
		loading.value=true;
		getActorActions({
			keywords:keywords.value,
			id:actorId.value
		})
		.then((res:any) => {
			tableData.value=recurOptions(res.data);
		})
		.catch((e:any) => {
			console.error(e)
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const handleDeleteActorAction=(data:any)=>{
		ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			isClose.value=false;
			loading.value=true;
			deleteActorAction(data.id)
			.then(() => {
				ElMessage.success("成功");
				load();
			})
			.catch((e:any) => {
				console.error(e);
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消删除"));
	}
	
	function recurOptions(list:any) {
		 function buildTree(groups:any,node:any) {
		   let children = []
		   for (let item of groups) {
		     if (item.group === node.group) {
				if(item.children){
					children=item.children;
					children.push(node)
				}else{
					children.push(node)
				}
				item.children=children;
				break;
		     }
		   }
		}
		let res = []
		for (let item of list) {
			if(item.group){
				if(res.length>0){
					buildTree(res,item)
				}else{
					let children = []
					children.push(item)
					item.children=children;
					res.push(item)
				}
			}else{
				res.push(item)
			}
		}
	  return res
	}
	
	const emits = defineEmits(['onchange','execute'])
	const handleExecuteAction=(row :any)=>{
		ElMessageBox.confirm("确认执行【"+row.name+"】吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			loading.value=true;
			executeActorAction({
				id:row.actorId,
				action:row.code
			})
			.then((res:any) => {
				ElMessage.success("成功");
				if(res && res.data){
					handleChildren(res.data);
				}else{
					ElMessage.warning("未执行,指令不完整.");
				}
			})
			.catch((e) => {
				console.error(e)
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消"));
	}
	
	const handleSynchronizeCommandsForTheSameComponent=()=>{
		ElMessageBox.confirm("确认同步当前对象指令到同组件对象上吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			loading.value=true;
			synchronizeCommandsForTheSameComponent({
				id:actorId.value,
			})
			.then((res:any) => {
				ElMessage.success("成功");
			})
			.catch((e) => {
				console.error(e)
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消"));
	}
	
	const handleChildren=(children:any)=>{
		for(var item of children){
			if(item.hasOwnProperty('commands')){
				for(var command of item.commands){
					emits('execute',{
						method:command.command,
						jsondata:command.data,
					})
				}
			}
			if(item.hasOwnProperty('children')){
				handleChildren(item.children);
			}
		}
	}
	
	const closeDialog=(e:any)=>{
		load();
	}
	
	watch(props,() => {
			baseUrl.value=props.baseUrl;
			actorId.value=props.actorId;
			if(actorId.value){
				load();
			}
		},
	    { immediate: true, deep: true },
	)
	
	defineExpose({
	});
	
	onMounted(() => {
	});
</script>

<style scoped>
	.action-row{
		border-bottom: 1px solid #333333;
		  -webkit-user-select: none; /* Safari */
		  -moz-user-select: none; /* Firefox */
		  -ms-user-select: none; /* IE10+/Edge */
		  user-select: none; /* Standard syntax */
		.row-group{
			>.head{
				height: 28px;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: nowrap;
				cursor: pointer;
				padding: 0 10px;
				  -webkit-user-select: none; /* Safari */
				  -moz-user-select: none; /* Firefox */
				  -ms-user-select: none; /* IE10+/Edge */
				  user-select: none; /* Standard syntax */
			}
			>.head::before{
				content: "";
				width: 2px;
				height: 12px;
				background-color: #7258e9;
				position: absolute;
				left: 0;
				top: 6px;
			}
			>.body{
				padding:0px !important;
				margin-top: 2px;
			  -webkit-user-select: none; /* Safari */
			  -moz-user-select: none; /* Firefox */
			  -ms-user-select: none; /* IE10+/Edge */
			  user-select: none; /* Standard syntax */
			}
		}
		
		.row-content{
			margin-left: 5px;
			margin-right: 5px;
			padding-top: 2px;
			margin-bottom: 2px;
			height: 28px;
			display: flex;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: space-between;
			align-items: center;
			padding-left: 8px;
			border-radius: 5px;
			background-color:#161616bd; 
			position: relative;
			font-size: 13px;
			.ellipsis {
			  white-space: nowrap; /* 确保文本在一行内显示 */
			  overflow: hidden; /* 隐藏超出容器的文本 */
			  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
			}
			>.right{
				display: flex;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: center;
				align-items: center;
				.el-icon{
					margin-right: 5px;
					font-size: 0.75rem;
					cursor: pointer;
				}
			}
		}
	}
</style>